/** @file MainPage.qml
@brief Qt-Complex test application for Harmattan Meego 1.2

@authorname \n
@licenseversion \n
@actualversion - @dateupdate

@licensenote
*/

import QtQuick 1.1
import com.meego 1.0
import "QtComplex" as Framework
import "QtComplex/Theme.js" as Theme
import "QtComplex/Geometry.js" as Geometry
import "QtComplex/TestApplication.js" as Test

Page {
    id: mainPage
    tools: commonTools

    Framework.ComplexItem {
        id: qtComplex
        theme: "default"
        screenCategory: screen.displayCategory;
    }

    // Background
    Rectangle {
        id: background

        width: mainPage.width
        height: mainPage.height
        color: "black"

        Text {
            id: textBackground
            width: background.width
            anchors.top: background.top
            anchors.topMargin: appTopBanner.height + Geometry.getSeparator()
            anchors.left: background.left
            anchors.right: background.right
            anchors.leftMargin: Geometry.getFieldSpacing()
            anchors.rightMargin: Geometry.getFieldSpacing()
            color: "grey"
            font.pointSize: Geometry.getFontPoints();
            wrapMode: TextEdit.Wrap
            text: "Qt-Complex 1.0rc" +
                  "<br><br>" +
                  "Press the button toolbars to show the pages" +
                  "<br>Press the banner to show/hide the toolbar" +
                  "<br>Read the wiki for framework installation and use" +
                  "<br><br>" +
                  "Version 1.0.2 Harmattan, Jul 2011"
        }
    }

    // Map View
    Item {
        id: mappage
        width: mainPage.width;
        height: mainPage.height - appTopBanner.height
        anchors.top: appTopBanner.bottom
        state: "Hide"

        // Map view object with navigaton controls
        Framework.MapLoader {
            id: viewmap
            width: mappage.width; height: mappage.height
            theme: "default";
            obj: "MapView"
        }
        states: [
            State { name: "Show"; AnchorChanges { target: mappage; anchors.left: parent.left } },
            State { name: "Hide"; AnchorChanges { target: mappage; anchors.left: parent.right } }
        ]
        transitions: Transition {
            AnchorAnimation { duration: Test.animDuration; easing.amplitude: 1; easing.type: Easing.OutQuad }
        }
    }

    // Home page
    Item {
        id: homepage

        width: parent.width
        height: parent.height - appTopBanner.height
        anchors.top: appTopBanner.bottom
        state: "Hide"

        // Background
        Rectangle {
            id: homebackground
            width: parent.width
            height: parent.height
            color: "#ffffff"; radius: 15
            border.width: 3; border.color: Test.appBackground
        }

        // Example loading a theme image with local methods
        Image {
            id: homeimage
            source: "QtComplex/themes/default/SplashObject.png"
            width: if (homebackground.width > homebackground.height)
                   { homebackground.height; }
                   else { homebackground.width; }
            height: if (homebackground.width > homebackground.height)
                    { homebackground.height; }
                    else { homebackground.width; }
            fillMode: Image.PreserveAspectFit
            anchors.horizontalCenter: homebackground.horizontalCenter
            anchors.top: homebackground.top
            anchors.topMargin: Geometry.getSeparator();
        }

        states: [
            State { name: "Show"; AnchorChanges { target: homepage; anchors.left: parent.left } },
            State { name: "Hide"; AnchorChanges { target: homepage; anchors.left: parent.right } }
        ]

        transitions: Transition {
            AnchorAnimation { duration: Test.animDuration; easing.amplitude: 1; easing.type: Easing.OutQuad }
        }
    }

    // Info page
    Rectangle {
        id: infopage

        width: parent.width
        height: parent.height - appTopBanner.height
        color: "black"
        anchors.top: appTopBanner.bottom
        state: "Hide"

        Framework.Loader {
            id: infoLoader
            width: Math.round(parent.width * 0.95);
            height: Math.round(parent.height * 0.75);
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            theme: "default"; obj: "Info";
            obj_string: "Qt-Complex 1.0 Harmattan"
            obj_message: "Test application<br>" +
                         "1.0.2rc<br>" +
                         "License LGPL 3.0"
            obj_icon: "themes/default/Qt-Complex-Logo150.png";
        }

        states: [
            State {
                name: "Show"
                AnchorChanges { target: infopage; anchors.left: parent.left }
            },
            State {
                name: "Hide"
                AnchorChanges { target: infopage; anchors.left: parent.right }
            }
        ]

        transitions: Transition {
            AnchorAnimation {
                duration: Test.animDuration
                easing.amplitude: 1; easing.type: Easing.OutQuad }
        }
    }

    // Standard toolbar
    Item {
        id: toolbar

        width: mainPage.width
        height: Math.round(mainPage.height * Test.appToolBar);
        anchors.bottom: mainPage.top
        opacity: 1
        state: "Show"

        Framework.Loader {
            id: toolbarLoader

            width: parent.width; height: parent.height
            fontPoints: Geometry.getFontPoints();
            fieldHeight: Geometry.getFieldHeight() + Geometry.getFieldSpacing();
            fieldSpacing: Geometry.getFieldSpacing();
            theme: "default"; obj: "ToolBar"
            onBtn1click: Test.toolbarButtonHome();
            onBtn2click: Test.toolbarButtonMap();
            onBtn3click: Test.toolbarButtonInfo();
        }

        states: [
            State {
                name: "Show"
                AnchorChanges { target: toolbar;
                    anchors.top: appTopBanner.bottom
                    anchors.bottom: undefined }
            },
            State {
                name: "Hide"
                AnchorChanges { target: toolbar;
                    anchors.bottom: mainPage.top
                    anchors.top: undefined }
            }
        ]

        // The states transition are defined reversible to be reused to show and hide the object
        transitions: [
            Transition {
                from: "Show"; to: "Hide"
                reversible: true
                AnchorAnimation { easing.type: Easing.InQuad; duration: Test.animDuration; }
            }
        ]
    }

    // Top banner.
    Item {
        id: appTopBanner

        // Width should be always all the mainPage size
        width: parent.width;
        // Height is the percentage dedicated to the banner
        height: Math.round(parent.height * Test.appTopBanner)
        anchors.top: parent.top

        Framework.Loader {
            id: topbannerLoader; width: parent.width; height: parent.height
            obj_color: Test.appBackground; theme: "default"; obj: "StaticBanner"
        }

        MouseArea {
            id: mouseArea
            anchors.fill: parent
            onClicked: {
                if (toolbar.state == "Hide") {
                    toolbar.state = "Show";
                    console.log("Show toolbar");
                }
                else {
                    toolbar.state = "Hide";
                    console.log("Hide toolbar");
                }
            }
        }
    }

    // Load a custom splash screen using the ShowSplas method
    Framework.ShowSplash {
        id: splashScreen
        width: parent.width
        height: parent.height
        customSplash: "themes/default/Splash.qml"
        slpashAnimDuration: Test.animSplash
        waitDuration: Test.waitSplash
    }
}
